<template>
  <MainSlot v-if="resetDom">
    <template v-slot:table>
      <div class="batchConfig flex">
        <div class="equipment configItem">
          <div class="title">选择设备</div>
          <div class="equipmentList">
            <div class="item flex" :class="feedData.feedMachineId == item.feedMachineId ? 'itemStyle' : ''"
              v-for="item, index in feedEquipmentList" :key="index" @click.stop="chooseFeedMachine(item)">
              <span>{{ item.feedMachineName }}</span>
              <span style="color:rgb(8, 177, 8)" v-if="item.status">在线</span>
              <span style="color:rgb(177, 8, 8)" v-else>离线</span>
            </div>
          </div>
        </div>
        <div class="diningConfig  configItem" v-loading="loading||setTime" element-loading-text="配置中，请稍后..."
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
          <div class="content" v-loading="switchLoading" element-loading-text="切换模式中，请稍后..."
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
            <div class="operationPanel">
              <el-switch style="display: block" v-model="switchFlag" :active-value="0" :inactive-value="1"
                @change="switchingMode()" active-color="#13ce66" inactive-color="#ff4949" active-text="自动模式"
                inactive-text=" 手动模式">
              </el-switch>
              <el-button type="primary" icon="el-icon-refresh-right" size="mini" plain :loading="loading"
                @click="refreshData()">刷新数据</el-button>
            </div>
            <!-- 自动模式 -->
            <div v-if="switchFlag == 0">
              <el-tabs v-model="editableTabsValue" type="border-card" @tab-click="handleClickTabs">
                <template v-for="tab, index in tabPaneList">
                  <el-tab-pane :label="tab.tabLabel" :key="index" v-if="tapFlag.indexOf(tab.flag) !== -1">
                    <!-- 自动模式-投料 -->
                    <TakeFoodConfig @getMaterialStagingData="getMaterialStagingData"
                      v-if="chartstau && tabLabel.indexOf(tab.flag) !== -1" :fishPondList="fishPondList"
                      :materialList="materialList" :formConfig="formConfig" :tabLabel="tabLabel" :time24="time24"
                      :time60="time60" :formData="formData">
                    </TakeFoodConfig>
                  </el-tab-pane>
                </template>
              </el-tabs>
              <!-- 自动模式-备料 -->
              <el-dialog :title="`${tabLabel}备料`" :visible.sync="dialogVisible"
                :before-close="() => { dialogVisible = false }">
                <!-- 备料组件 -->
                <PreparatoryWork v-if="dialogVisible" :tabLabel="tabLabel" :pondFlag="pondFlag" :formData="formData"
                  :time24="time24" :time60="time60" @getMaterialStagingData="getMaterialStagingData"
                  @cancel="cancelDialog">
                </PreparatoryWork>
              </el-dialog>
              <div style="padding-top:10px">
                <el-button type="primary" size="mini" :loading="loading" icon="el-icon-download"
                  @click="saveConfig">保存配置</el-button>
                <el-button type="primary" size="mini" :loading="loading" v-show="tabLabel.indexOf('A') == -1"
                  @click="stockConfig">备料</el-button>
                <el-button type="primary" size="mini" :loading="loading" plain @click="cancelConfig">取消</el-button>
                <span style="padding: 0 20px;" v-show="setTime">系统配置{{ setTime }}秒...</span>
              </div>
            </div>
            <!-- 手动改控制模块 -->
            <manualMode v-if="switchFlag == 1 && showSwitchFlag" :tapFlag="tapFlag" :switchFlag="showSwitchFlag"
              :manualModeData="manualModeData" :feedMachineId="feedData.feedMachineId" :deviceId="feedData.deviceId" />
          </div>
          <!-- <div v-if="!feedData.status" class="shadow el-icon-link">
            设备已离线
          </div> -->
          <!-- <div v-if="setTime" class="time">
            {{ setTime }}{{ timeLength }}
            <div :style="{ height: '100%', width: `${(setTime / (timeLength / 1000)) * 100}%` ,}"></div>
          </div> -->
        </div>
      </div>
    </template>
  </MainSlot>
</template>

<script>
import MainSlot from "@/components-production-management/MainSlot";
import FishPondApi from "@/api/basic-info-manage/fishPond"
import FeedingEquipmentApi from "@/api/feeding-manegement/feeding-equipment";
import FeedingStrategyApi from "@/api/feeding-manegement/feeding-strategy";
import MaterialApi from "@/api/basic-info-manage/material"
import TakeFoodConfig from "./components/takeFoodConfig.vue"
import PreparatoryWork from "./components/preparatoryWork.vue"
import manualMode from "./components/manualMode.vue"
export default {
  name: "AreaManage",
  components: { MainSlot, PreparatoryWork, TakeFoodConfig, manualMode },
  mixins: [],
  data() {
    return {
      showSwitchFlag: false,
      switchLoading: false,
      resetDom:true,
      switchFlag: 1, //0自动；1手动
      openSwitchFlag:0,//启动/停止
      loading: false,
      rules: {
        feedMachineId: [{ required: true, message: '请选择投料机', trigger: 'change' }],
        feedMachineMaterialId: [{ required: true, message: '请选择料罐', trigger: 'change' }],
        feedMachinePondId: [{ required: true, message: '请选择料管', trigger: 'change' }],
        feedMachinePlanName: [{ required: true, message: '请输入策略名称', trigger: 'change' }],
        planStartTime: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
        planEndTime: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
      },
      tabPaneList: [{ tabLabel: 'A塘', flag: 'A' }, { tabLabel: 'C塘', flag: 'C' }, { tabLabel: 'D塘', flag: 'D' }],
      formConfig: {},
      moduleObj: {
        pond_A: [{
          title: 'A饲料',
          pondKey: 'ZKBPA',
          materialKey: 'ZKBMAA',
          materialList: [
            {
              inputNumKey: 'R100',
              startHourKey: 'D1',
              startMinuteKey: 'D2',
              endHourKey: 'D3',
              endMinuteKey: 'D4',
              switchKey: 'M1'
            },
            {
              inputNumKey: 'R101',
              startHourKey: 'D5',
              startMinuteKey: 'D6',
              endHourKey: 'D7',
              endMinuteKey: 'D8',
              switchKey: 'M3'
            },
            {
              inputNumKey: 'R102',
              startHourKey: 'D9',
              startMinuteKey: 'D10',
              endHourKey: 'D11',
              endMinuteKey: 'D12',
              switchKey: 'M5'
            },
            {
              inputNumKey: 'R103',
              startHourKey: 'D13',
              startMinuteKey: 'D14',
              endHourKey: 'D15',
              endMinuteKey: 'D16',
              switchKey: 'M7'
            }
          ]
        }, {
          title: 'B饲料',
          pondKey: '',
          materialKey: 'ZKBMAB',
          materialList: [
            {
              inputNumKey: 'R110',
              startHourKey: 'D51',
              startMinuteKey: 'D52',
              endHourKey: 'D53',
              endMinuteKey: 'D54',
              switchKey: 'M151'
            },
            {
              inputNumKey: 'R111',
              startHourKey: 'D55',
              startMinuteKey: 'D56',
              endHourKey: 'D57',
              endMinuteKey: 'D58',
              switchKey: 'M153'
            },
            {
              inputNumKey: 'R112',
              startHourKey: 'D59',
              startMinuteKey: 'D60',
              endHourKey: 'D61',
              endMinuteKey: 'D62',
              switchKey: 'M155'
            },
            {
              inputNumKey: 'R113',
              startHourKey: 'D63',
              startMinuteKey: 'D64',
              endHourKey: 'D65',
              endMinuteKey: 'D66',
              switchKey: 'M157'
            }
          ]
        }
        ],
        pond_C: [{
          title: '饲料',
          pondKey: 'ZKBPC',
          materialKey: 'ZKBMC',
          materialList: [
            {
              inputNumKey: 'R336',
              startHourKey: 'D281',
              startMinuteKey: 'D282',
              endHourKey: 'D283',
              endMinuteKey: 'D284',
              switchKey: 'M331'
            },
            {
              inputNumKey: 'R337',
              startHourKey: 'D285',
              startMinuteKey: 'D286',
              endHourKey: 'D287',
              endMinuteKey: 'D288',
              switchKey: 'M333'
            },
            {
              inputNumKey: 'R338',
              startHourKey: 'D289',
              startMinuteKey: 'D290',
              endHourKey: 'D291',
              endMinuteKey: 'D292',
              switchKey: 'M335'
            },
            {
              inputNumKey: 'R339',
              startHourKey: 'D293',
              startMinuteKey: 'D294',
              endHourKey: 'D295',
              endMinuteKey: 'D296',
              switchKey: 'M337'
            }
          ]
        }],
        pond_D: [{
          title: '饲料',
          pondKey: 'ZKBPD',
          materialKey: 'ZKBMD',
          materialList: [
            {
              inputNumKey: 'R344',
              startHourKey: 'D301',
              startMinuteKey: 'D302',
              endHourKey: 'D303',
              endMinuteKey: 'D304',
              switchKey: 'M351'
            },
            {
              inputNumKey: 'R345',
              startHourKey: 'D305',
              startMinuteKey: 'D306',
              endHourKey: 'D307',
              endMinuteKey: 'D308',
              switchKey: 'M353'
            },
            {
              inputNumKey: 'R346',
              startHourKey: 'D309',
              startMinuteKey: 'D310',
              endHourKey: 'D311',
              endMinuteKey: 'D312',
              switchKey: 'M355'
            },
            {
              inputNumKey: 'R347',
              startHourKey: 'D313',
              startMinuteKey: 'D314',
              endHourKey: 'D315',
              endMinuteKey: 'D316',
              switchKey: 'M357'
            }
          ]
        }],
      },
      feedEquipmentList: [],
      tankList: [],
      barrelList: [],
      configuredList: [],
      contackPondName: undefined,
      contackVarietyNameList: [],
      activeIndex: undefined,
      activeIndex2: undefined,
      activeIndex3: undefined,
      status: undefined,
      showAddEditDialog: false,
      setTime: 0,
      editableTabsValue: '0',
      formData: {},
      initformData: {
        R100: '0',
        R110: '0',
        R101: '0',
        R111: '0',
        R102: '0',
        R112: '0',
        R103: '0',
        R113: '0',
        D1: '00',
        D2: '00',
        D3: '00',
        D4: '00',
        D51: '00',
        D52: '00',
        D53: '00',
        D54: '00',
        D5: '00',
        D6: '00',
        D7: '00',
        D8: '00',
        D55: '00',
        D56: '00',
        D57: '00',
        D58: '00',
        D9: '00',
        D10: '00',
        D11: '00',
        D12: '00',
        D59: '00',
        D60: '00',
        D61: '00',
        D62: '00',
        D13: '00',
        D14: '00',
        D15: '00',
        D16: '00',
        D63: '00',
        D64: '00',
        D65: '00',
        D66: '00',
        M1: '0',
        M151: '0',
        M3: '0',
        M153: '0',
        M5: '0',
        M155: '0',
        M7: '0',
        M157: '0',
        R336: '0',
        R337: '0',
        R338: '0',
        R339: '0',
        D281: '00',
        D282: '00',
        D283: '00',
        D284: '00',
        D285: '00',
        D286: '00',
        D287: '00',
        D288: '00',
        D289: '00',
        D290: '00',
        D291: '00',
        D292: '00',
        D293: '00',
        D294: '00',
        D295: '00',
        D296: '00',
        M331: '0',
        M333: '0',
        M335: '0',
        M337: '0',
        R344: '0',
        R345: '0',
        R346: '0',
        R347: '0',
        D301: '00',
        D302: '00',
        D303: '00',
        D304: '00',
        D305: '00',
        D306: '00',
        D307: '00',
        D308: '00',
        D309: '00',
        D310: '00',
        D311: '00',
        D312: '00',
        D313: '00',
        D314: '00',
        D315: '00',
        D316: '00',
        M351: '0',
        M353: '0',
        M355: '0',
        M357: '0',
        //备料
        D217: '0',
        D237: '0',
        D218: '0',
        D238: '0',
        D219: '0',
        D239: '0',
        D220: '0',
        D240: '0',
        D201: '00',
        D202: '00',
        D203: '00',
        D204: '00',
        D205: '00',
        D206: '00',
        D207: '00',
        D208: '00',
        D209: '00',
        D210: '00',
        D211: '00',
        D212: '00',
        D213: '00',
        D214: '00',
        D215: '00',
        D216: '00',
        D257: '0',
        D258: '0',
        D259: '0',
        D260: '0',
        D241: '00',
        D242: '00',
        D243: '00',
        D244: '00',
        D245: '00',
        D246: '00',
        D247: '00',
        D248: '00',
        D249: '00',
        D250: '00',
        D251: '00',
        D252: '00',
        D253: '00',
        D254: '00',
        D255: '00',
        D256: '00',
        D221: '00',
        D222: '00',
        D223: '00',
        D224: '00',
        D225: '00',
        D226: '00',
        D227: '00',
        D228: '00',
        D229: '00',
        D230: '00',
        D231: '00',
        D232: '00',
        D233: '00',
        D234: '00',
        D235: '00',
        D236: '00',
        D277: '0',
        D278: '0',
        D279: '0',
        D280: '0',
        D261: '00',
        D262: '00',
        D263: '00',
        D264: '00',
        D265: '00',
        D266: '00',
        D267: '00',
        D268: '00',
        D269: '00',
        D270: '00',
        D271: '00',
        D272: '00',
        D273: '00',
        D274: '00',
        D275: '00',
        D276: '00',
        M251: '0',
        M253: '0',
        M255: '0',
        M257: '0',
        M291: '0',
        M293: '0',
        M295: '0',
        M297: '0',
        M271: '0',
        M273: '0',
        M275: '0',
        M277: '0',
        M311: '0',
        M313: '0',
        M315: '0',
        M317: '0',
      },
      feedData: {},
      fishPondList: [],
      materialList: [],
      time24: [],
      time60: [],
      time: null,
      timeOut1:null,
      timeOut2:null,
      timeOut3:null,
      formDataCopy: {},
      showA: false,
      showB: true,
      showC: true,
      tapFlag: '',
      chartstau: false,
      tabLabel: 'A塘',
      dialogVisible: false,
      pondFlag: 'C',
      manualModeData: {},
      timeLength: 0,
    };
  },
  computed: {
  },
  watch: {},
  created() {
  },
  mounted() {
    this.time24 = this.getTimeList(24);
    this.time60 = this.getTimeList(60);
    this.queryFeedingEquipment() //获取设备
    this.queryFishPond()
    this.queryMaterial();
    this.initDom();
    this.formConfig = this.moduleObj[`pond_A`]
  },
  methods: {
    showswitch() {
      this.showSwitchFlag = false;
      this.$nextTick(() => {
        this.showSwitchFlag = true
      })
    },
    stockConfig() {
      console.log(this.tabLabel)
      if (this.tabLabel == 'C塘') {
        this.pondFlag = 'C'
      } else if (this.tabLabel == 'D塘') {
        this.pondFlag = 'D'
      } else {
        this.pondFlag = 'A'
      }
      this.dialogVisible = true;
    },
    getMaterialStagingData(data) {
      this.formData = { ...this.formData, ...data };
      this.cancelDialog();
    },
    cancelDialog() {
      this.dialogVisible = false
    },
    initDom() {
      this.chartstau = false
      this.$nextTick(
        () => {
          this.chartstau = true
        })
    },
    handleClickTabs(tab) {
      this.tabLabel = tab.label
      let pondFlag = ''
      if (tab.label == 'C塘') {
        pondFlag = 'C'
      } else if (tab.label == 'D塘') {
        pondFlag = 'D'
      } else {
        pondFlag = 'A'
      }
      this.initDom()
      this.formConfig = this.moduleObj[`pond_${pondFlag}`]
    },
    //修改设备状态
    changeFeedStatus(data) {
      this.loading = true
      console.log(data.status)
      FeedingEquipmentApi.changeFeedStatus({
        feedMachineId: data.feedMachineId,
        status: data.status
      }).then(res => {
        this.loading = false;
        if (res && res.success) {
          this.$message.success('操作成功');
        } else {
          data.status = !data.status;
          this.$message.success('操作失败');
        }
      }).catch(err => {
        this.loading = false
      })
    },
    //取消配置
    cancelConfig() {
      this.queryConfigByCondition(true);
      this.loading = false;
    },
    //手动自动
    switchingMode() {
      this.switchLoading = true;
      this.setTimeCount();
      this.timeLength = 0;
      console.log(this.switchFlag)
      let switchFlag = this.switchFlag + ''
      FeedingEquipmentApi.saveConfig({
        deviceId: this.feedData.deviceId,
        payload: { "M28": this.switchFlag || 0 }
      }).then(res => {
        if (res && res.success) {
          this.timeLength = 2;
          console.log('timeLength',this.timeLength)
          this.timeOut1 = setTimeout(async () => {
            this.switchLoading = false;
            clearInterval(this.time); this.setTime = 0;
            await this.queryConfigByCondition(true);
            console.log(Number(this.formData['M28']), Number(switchFlag));
            if (Number(this.formData['M28']) == Number(switchFlag)) {
              this.$message.success('切换成功');
            } else {
              this.switchFlag = Number(this.formData['M28'] || 0);
              this.$message.warning('切换失败');
            }
          }, this.timeLength * 1000);
        } else {
          this.timeLength = 0;
          this.switchLoading = false;
          this.timeLength = 0;
          clearInterval(this.time); this.setTime = 0;
          this.switchFlag = Number(this.formData['M28'] || 0)
          this.$message.warning('切换失败');
        }
      }).catch(err => {
        this.timeLength = 0;
        this.switchLoading = false
        clearInterval(this.time); this.setTime = 0;
      })
    },
    updateData() {
      clearTimeout(this.timeOut1)
      clearTimeout(this.timeOut2)
      clearTimeout(this.timeOut3)
      clearInterval(this.time)
    },
    //刷新数据
    refreshData() {
      this.updateData();
      this.setTimeCount();
      this.loading = true;
      FeedingEquipmentApi.saveConfig({
        deviceId: this.feedData.deviceId,
        payload: { "LB0": true }
      }).then(res => {
        this.loading = false
        if (res && res.success) {
          this.timeOut2 = setTimeout(async () => {
            clearInterval(this.time); this.setTime = 0;
            await this.queryConfigByCondition(true);
            this.$message.success('刷新成功');
            this.loading = false;
          }, 8000);
        } else {
          clearInterval(this.time); this.setTime = 0;
          this.$message.warning('刷新失败');
          this.loading = false;
        }
      }).catch(err => {
        clearInterval(this.time); this.setTime = 0;
        this.loading = false;
      })
    },
    //保存配置
    saveConfig() {
      let isExecute = true
      let that = this
      let configMap = {}
      let basicsObj = {
        A: { ZKBPA: 'A塘鱼塘', ZKBMAA: 'A塘A料', ZKBMAB: 'A塘B料', },
        C: { ZKBPC: 'C塘鱼塘', ZKBMC: 'C塘物料', },
        D: { ZKBPD: 'D塘鱼塘', ZKBMD: 'D塘物料', },
      }
      for (let key in basicsObj) {
        if (that.tapFlag.indexOf(key + '') !== -1 && isExecute) {
          for (let k in basicsObj[key]) {
            if (!that.formData[k] && isExecute) {
              that.$message.warning(`未配置${basicsObj[key][k]}`);
              isExecute = false
            }
          }
        }
      }
      if (!isExecute) return
      this.loading = true
      if (Object.keys(this.formDataCopy).length > 0 || !this.formDataCopy) {
        let allObj = { ...this.formDataCopy, ...this.formData };
        for (let key in allObj) {
          let judgement_first = !this.formDataCopy[key] && this.formData[key];
          let judgement_second = this.formDataCopy[key] && this.formData[key] !== this.formDataCopy[key]
          if (judgement_first || judgement_second) {
            configMap[key] = allObj[key]
          }
        }
      } else {
        for (let key in this.formData) {
          if (this.formData[key]) { configMap[key] = this.formData[key] }
        }
      }
      this.setTimeCount();
      this.timeLength = Object.keys(configMap).length * 0.5 || 0;
      console.log('Object.keys(configMap).length * 0.5',Object.keys(configMap).length * 0.5)
      FeedingEquipmentApi.saveConfig({
        deviceId: this.feedData.deviceId,
        payload: { ...configMap }
      }).then(res => {
        this.loading = false
        if (res && res.success) {
          this.timeOut3 = setTimeout(() => {
            clearInterval(this.time); this.setTime = 0;
            this.loading = false;
            this.timeLength = 0;
            this.queryConfigByCondition(true);
            this.$message.success('配置成功');
          }, this.timeLength < 2500 ? 2500 : this.timeLength);
        } else {
          clearInterval(this.time); this.setTime = 0;
          this.timeLength = 0;
          this.$message.success('操作失败')
        }
      }).catch(err => {
        clearInterval(this.time); this.setTime = 0;
        this.timeLength = 0;
        this.loading = false
      })
    },
    setTimeCount() {
      this.time = setInterval(() => {
        this.setTime++;
      }, 1000);
    },
    //获取配置数据项
    async queryConfigByCondition(noTabs = false) {
      let res = await FeedingEquipmentApi.queryConfigByFeedMachineId({ feedMachineId: this.feedData.feedMachineId })
      this.loading = false
      if (res && res.data) {
        this.showswitch();
        this.manualModeData = res.data || {};
        console.log(res.data['M28'])
        this.formData = { ...this.initformData, ...res.data };
        this.formDataCopy = JSON.parse(JSON.stringify(this.formData));
        this.switchFlag = Number(this.formData['M28'] || 0) || 0;
        this.initDom();
      } else {
        this.formData = {};
      }
      if (!noTabs) {
        this.initDom();
        this.tabLabel = 'A塘';
        this.editableTabsValue = '0';
        this.formConfig = this.moduleObj[`pond_A`];
      }
    },
    queryMaterial() {
      MaterialApi.queryByCondition({ materialTypeNo: 'FEED' }).then(res => {
        this.materialList = res.data
      })
    },
    //查询可选鱼塘
    queryFishPond() {
      FishPondApi.queryByCondition({}).then(res => {
        this.fishPondList = res.data;
        console.log(this.fishPondList)
      })
    },
    //选择设备
    chooseFeedMachine(data) {
      console.log(data, 'feedData')
      if (data.type) {
        switch (data.type) {
          case "一拖一":
            this.tapFlag = 'A'
            break;
          case "一拖二":
            this.tapFlag = 'AC'
            break;
          case "一拖三":
            this.tapFlag = 'ACD'
            break;
          default:
            this.tapFlag = ''
            break;
        }
        this.feedData = data;
        this.queryConfigByCondition();
      } else {
        this.tapFlag = ''
      }
    },
    getTimeList(num) {
      num -= 1
      var list = []
      for (var i = 0; i <= num; i++) {
        list.push({
          label: i < 10 ? '0' + i : i + '',
          value: i + ''
        })
      }
      return list
    },
    //获取设备
    queryFeedingEquipment() {
      FeedingEquipmentApi.queryByCondition().then(res => {
        if (res && res.data) {
          this.feedEquipmentList = res.data;
          this.feedData = res.data[0];
          this.chooseFeedMachine(this.feedData)
        } else {
          this.feedEquipmentList = [];
          this.feedData = {};
        }
      })
    },
    feedTimeChange(e, index) {
      this.formData.feedMachinePlanDetailList[index].feedStartTime = e[0];
      this.formData.feedMachinePlanDetailList[index].feedEndTime = e[1];
      console.log(this.formData);
    },
    disabledStartDate(time) {
      let date = new Date(this.formData.planStartTime)
      let planStartTime = date.getTime();
      if (planStartTime) {
        return time.getTime() > planStartTime;
      } else {
        return false;
      }
    },
    disabledEndDate(time) {
      let date = new Date(this.formData.planEndTime)
      let planEndTime = date.getTime();
      if (planEndTime) {
        return time.getTime() < planEndTime;
      } else {
        return false;
      }
    },
    switchChange(e, data) {
      this.$confirm(`确认${e ? '开启' : '关闭'}该策略吗, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",

      })
        .then(() => {
          FeedingStrategyApi.changeStatus({ planId: data.feedMachinePlanId, targetStatus: e }).then(res => {
            if (res.success === true) {
              this.$message.success("操作成功!");
              this.queryAllConfigured()
            }
          });
        })
        .catch(() => {
          this.resetActionBar();
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    queryAllConfigured() {
      FeedingStrategyApi.queryByCondition().then(res => {
        if (res.data) this.configuredList = res.data;
      })
    },


    changeSelect(item, index) {
      if (item.feedMachinePondId) {
        this.$set(this.formData, 'feedMachinePondId', item.feedMachinePondId);
        this.activeIndex3 = index;
        this.contackVarietyNameList = item.varietyNameList;
        this.contackPondName = item.pondName;
        this.$refs['ruleForm'].clearValidate('feedMachinePondId')
        return
      } else if (item.feedMachineMaterialId) {
        this.$set(this.formData, 'feedMachineMaterialId', item.feedMachineMaterialId);
        this.activeIndex2 = index;
        this.barrelList = item.pondList;
        this.$refs['ruleForm'].clearValidate('feedMachineMaterialId')
        return
      } else if (item.feedMachineId) {
        this.tankList = []
        this.barrelList = []
        this.activeIndex2 = undefined;
        this.activeIndex3 = undefined;
        this.$set(this.formData, 'feedMachineId', item.feedMachineId);
        this.activeIndex = index;
        this.tankList = item.materialList
        this.$refs['ruleForm'].clearValidate('feedMachineId')
        return
      }
    },
    addRow() {
      this.formData.feedMachinePlanDetailList.push({})
    },
    delRow(index) {
      this.formData.feedMachinePlanDetailList.splice(index, 1)
    },
    // 单个删除
    delOne(data) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",

      })
        .then(() => {
          FeedingStrategyApi.delById({ id: data.feedMachinePlanId }).then(res => {
            if (res.success === true) {
              this.$message.success("删除成功!");
              this.queryAllConfigured()
            }
          });
        })
        .catch(() => {
          this.resetActionBar();
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 添加
    add() {
      console.log(this.formData);
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          FeedingStrategyApi.add(this.formData).then(res => {
            if (res.success === true) {
              this.$message.success("添加成功!");
              this.queryAllConfigured()
              this.cancel() // 清除表单数据
            } else {
              this.$message.warning(res.message);
            }
          })
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.formData = { feedMachinePlanDetailList: [{}] }
      this.tankList = []
      this.barrelList = []
      this.contackPondName = undefined;
      this.contackVarietyNameList = [];
      this.activeIndex = undefined;
      this.activeIndex2 = undefined;
      this.activeIndex3 = undefined;
      this.$refs['ruleForm'].resetFields()
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../style/index.scss";

::v-deep .el-form-item__content {
  line-height: 28px !important;
}

.form-contack {
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 40px;
  color: #004486;
  font-size: 18px;
}

.form-item-row {
  padding-left: 40px;
}

.form-item-time {
  padding-left: 40px;
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
  }
}

.result-row {

  // display: flex;
  // flex-wrap: wrap;
  .result-row-item {
    padding-left: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;

    .result-row-item-shell {
      display: flex;
      height: 32px;
      color: #161616;
      font-size: 16px;
      margin-right: 10px;

      // &:not(:first-child){
      //   margin-left: 10px;
      // }
      .result-row-item-label {
        height: 100%;
        line-height: 32px;
      }

      .result-row-item-value {
        width: 200px;
        height: 100%;
        padding-left: 10px;
        line-height: 32px;
        background: #F7F7F7;
        border-radius: 5px;
      }
    }
  }
}

.result-row-del-btn {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 59px;
  height: 32px;
  border: 1px solid #0480FB;
  border-radius: 5px;
  font-size: 16px;
  color: #0480FB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.batchConfig {
  width: 100%;
  height: 100%;

  // background: #ffffff;
  .configItem {
    height: 100%;
    padding: 15px;
    background: #ffffff;
    box-sizing: border-box;
  }

  .equipment {
    width: 300px;
    text-align: center;

    .title {
      line-height: 30px;
    }

    .equipmentList {
      height: calc(100% - 30px);
      background: #f7f7f7;
      overflow-y: auto;

      .item {
        color: #0480FB;
        height: 50px;
        padding: 0 15px;
        background: #ffffffaa;
        margin-bottom: 1px;
        transition: all 0.5s;
        cursor: pointer;
      }

      .itemStyle {
        background: #dddddd;
      }

      .item:hover {
        background: #dddddd;
      }
    }
  }

  .diningConfig {
    width: calc(100% - 310px);
    position: relative;

    .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.9);
      text-align: center;
      line-height: 200px;
      z-index: 9;
      font-size: 24px
    }

    .content {
      width: 100%;
      height: 100%;
    }

    .dataItem {
      padding: 10px 0;
      justify-content: flex-start;

      .label {
        width: 80px;
        text-align: right;
        color: #666666;
      }

      .select {
        margin-right: 15px;
      }

      .timeSelect {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-select {
          width: 70px;
        }
      }
    }
  }
}

.operationPanel {
  margin: 15px 0;
  display: flex;
  justify-content: space-between;

  .switch {
    width: 300px;
    background-color: #0480FB;
  }
}

.time {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #cecece;

  &>div {
    background: #004486;
    color: #ffffff;
    line-height: 20px;
    transition: all 0.5s;
  }
}

::v-deep .module {
  height: 100% !important;

  .tableSlot {
    height: 100% !important;
  }
}

</style>